<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/*外边距margin属性：微调：文字或者图片
			margin使用问题1：自适应居中，建议使用div，套块元素，行块内元素，行内元素
			      使用问题2：行元素，加上下  右左外边距
				  行元素：不可以设置高宽【高---不可以动上下】，在一行显示【宽--可以左右】
				  使用问题3：垂直外边距
				  使用问题4：垂直外边距
				  */
			img{
				border:1px solid red;
				/*margin: 1个属性值  顺时针：上 右 下 左*/
				margin: 200px;
				/*margin：2个属性值  顺时针  上下  右左*/
				margin: 10px 200px;
				/*常用：盒子自适应居中---失效
				行内块：可以设置高宽，在一行内显示，无法居中
				  margin使用问题1：  自适应居中，必须设置宽度
				  */
				margin:0 auto;
				/*margin：3个属性值  顺时针  上下  右左*/
				margin: 100px 200px 300px ;
				/*margin：3个属性值  顺时针  上下  右左*/
				margin: 100px 200px 300px 400px ;
			}
			h1{
				/*快元素：可以设置高宽，不在一行显示，无法居中，内置文本
				text-align：center；*/
				/*常用：盒子自适应居中---设置宽度*/
				margin: 0 auto;
				border: 1px solid red;
				margin:0 auto;
			}
			span{
				/*行元素：不可以设置高宽，在一行显示，无法居中，内置文本
				text-align:center*/
				/*常用：盒子自适应居中---失效*/
				width: 100%;
				border:1px solid red;
				margin: 100px 200px;
			}
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin:0 auto;
			}
		</style>
	</head>
	<body>
		<div></div>
		<!--框模型，盒子模型：四个部分组成：
		                                外边距：边框以及四周，叫做外边距
										边框：--
										内边距：边框以内  与内容  之间距离，叫做内边距
										内容：块，行，行内元素本身宽高
		所有元素存于框模型中-->
		<h1>块级元素</h1>
		<img src="img/圣诞.png" width="300px" height="300px" alt="圣诞">
		<span>行内元素：圣诞</span>
		
	</body>
</html>